<template>
  <div class="equipment-card-container">
    <div class="card-container" v-for="item in data" :key="item.id">
      <img class="card-bg" :src="item.bgImg" />
      <img class="card-icon" :src="item.icon" />
      <div class="card-text">{{ item.name }}</div>
      <div class="num-container">
        <span>{{ item.total }}</span>
        <span class="num-separate">/</span>
        <span class="num--normal">{{ item.normal }}</span>
        <span class="num-separate">/</span>
        <span class="num--abnormal">{{ item.abnormal }}</span>
      </div>
    </div>

    <div class="card-container">
      <img class="card-bg" src="/static/img/park/item/vector.png" />
      <div
        class="legend-container"
        v-for="(item, index) in legendList"
        :key="index"
      >
        <div class="legend-block" :style="{ '--bg': item.color }"></div>
        <span class="legend-text">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EquipmentCard",
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      legendList: [
        {
          name: "设备总数",
          color: "#fff"
        },
        {
          name: "正常设备",
          color: "#27a6ff"
        },
        {
          name: "异常设备",
          color: "#ff744c"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
@totalColor: #fff;
@normalColor: #27a6ff;
@abnormalColor: #ff744c;

.equipment-card-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  color: #fff;

  .card-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 31%;
    height: 7.5rem;
    background-color: rgba(16, 27, 42, 1);

    .card-bg {
      position: absolute;
      top: 0;
      right: 5%;
      width: 3.75rem;
      height: 3.4375rem;
    }

    .card-icon {
      z-index: 1;
      width: 3.125rem;
      height: 3.125rem;
    }

    .card-text {
      z-index: 1;
      margin: 0.625rem 0;
      font-size: 0.75rem;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 300;
      color: #ffffff;
      line-height: 0.875rem;
    }

    .num-container {
      z-index: 1;
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 300;
      color: @totalColor;
      line-height: 0.875rem;

      .num-separate {
        margin: 0 0.25rem;
      }

      .num--normal {
        color: @normalColor;
      }

      .num--abnormal {
        color: @abnormalColor;
      }
    }

    .legend-container {
      z-index: 1;
      display: flex;
      align-items: center;
      margin-top: 0.9375rem;

      &:first-child {
        margin-top: 0;
      }

      .legend-block {
        width: 0.625rem;
        height: 0.625rem;
        background-color: var(--bg);
      }

      .legend-text {
        margin-left: 0.625rem;
        font-size: 0.75rem;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 300;
        color: #fff;
        line-height: 0.875rem;
      }
    }
  }
}
</style>
